/*
 * Copyright 2012 Clement Sannicolo <clement.sannicolo@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

Ext.define('Ext.ux.tab.TreeTabPanel',
{
	extend: 'Ext.Container',
	alias: 'widget.tab.treetabpanel',

	requires: [
	    'Ext.tree.Panel',
	    'Ext.data.TreeStore'
	],

	baseCls : Ext.baseCSSPrefix + 'treetabpanel',

	layout: 'border',
	
	constructor: function(config)
	{
		config = Ext.Object.merge({
			treepanel: {
				region: 'west',
				width: 150,
				rootVisible: false,
				useArrows: true,
				lines: false,
				bodyPadding: 0
			},
			contentpanel: {
				xtype: 'container',
				border: false,
				region: 'center'
			}
		}, config);
		
		Ext.apply(this, config);
		
		this.callParent(arguments);
	},

	initComponent: function()
	{
		var treeStore = this.createTreeStore(this.children);
		var cards = this.createCards(this.children);
		
		Ext.apply(this.treepanel, {
			xtype: 'treepanel',
			store: treeStore
		});
		
		Ext.apply(this.contentpanel, {
			layout: 'card',
			items: cards
		});
		
		this.items = [
		   this.treepanel,
		   this.contentpanel
		];
		
		this.callParent(arguments);
		
		this.getComponent(0).on('selectionchange', this.onSelectionchange, this);
	},

	createTreeStore: function(children)
	{
		var data = [];

		Ext.each(Ext.Array.from(children), function(item)
		{
			data.push(this.createNode(item));
		}, this);

		return Ext.create('Ext.data.TreeStore', {
			fields: ['id', 'text', 'iconCls', 'expanded', 'children'],
			root: {
            	expanded: true
        	},
        	proxy: {
        		type: 'memory',
        		data: data
        	}
		});
	},

	createNode: function(item)
	{
		var node = {
			id: item.itemId || Ext.id(),
			text: item.title,
			iconCls: item.iconCls,
			expanded: item.expanded,
			children: []
		};

		item.itemId = node.id;
		item.children = Ext.Array.from(item.children);

		if (item.children.length > 0)
		{
			Ext.each(item.children, function(item)
			{
				node.children.push(this.createNode(item));
			}, this);
		}
		else {
			node.leaf = true;
		}

		return node;
	},

	createCards: function(children)
	{
		var cards = [];

		Ext.each(Ext.Array.from(children), function(item)
		{
			cards = cards.concat(this.collectCards(item));
		}, this);
		
		return cards;
	},

	collectCards: function(item)
	{
		var cards = [],
			card = Ext.clone(item);

		delete card.title;
		delete card.iconCls;
		cards.push(card);

		Ext.each(Ext.Array.from(item.children), function(item)
		{
			cards = cards.concat(this.collectCards(item));
		}, this);

		return cards;
	},

	onSelectionchange: function(view, nodes)
	{
		if (nodes.length > 0) {
			this.getComponent(1).getLayout().setActiveItem(nodes[0].getId());
		}
	},
	
	setActiveItem: function(itemId)
	{	
		var node = this.getComponent(0).getStore().getNodeById(itemId);
		this.getComponent(0).getSelectionModel().select(node);
		this.getComponent(1).getLayout().setActiveItem(itemId);
	},

	getActiveItem: function()
	{
		this.getComponent(1).getLayout().getActiveItem();
	}
});